<template>
  <div class="lineChart">
    <Echarts :option="option"></Echarts>
  </div>
</template>

<script setup lang="ts">
import Echarts from "@/components/echartsTemplate/index.vue";
import { reactive } from "vue";
let result = [
  { name: "第一周", ai: 250, ai2: 399 },
  { name: "第二周", ai: 395, ai2: 493 },
  { name: "第三周", ai: 429, ai2: 410 },
  { name: "第四周", ai: 260, ai2: 597 },
  { name: "第五周", ai: 845, ai2: 492 },
  { name: "第六周", ai: 953, ai2: 793 },
  { name: "第七周", ai: 556, ai2: 412 },
  { name: "第八周", ai: 892, ai2: 993 },
  { name: "第九周", ai: 553, ai2: 480 },
  { name: "第十周", ai: 449, ai2: 468 },
];

let xData = result.map((item) => {
  return item.name;
});
let keys = ["ai", "ai2"],
  seriesData: {
    name: string;
    data: any[] | { coords: any[][] }[];
    type: string;
    yAxisIndex?: number;
    symbol: string;
    symbolSize?: number;
    barWidth?: number;
    splitNumber?: number;
    smooth: boolean;
    itemStyle?: { color: string };
    lineStyle:
    | { color: string; width: number }
    | {
      color: string;
      width: number;
      opacity: number;
      curveness: number;
    };
    areaStyle?: {
      opacity: number;
      color: {
        x: number;
        y: number;
        x2: number;
        y2: number;
        type: string;
        global: boolean;
        colorStops: { offset: number; color: string }[];
      };
      shadowColor: string;
      shadowBlur: number;
    };
    coordinateSystem?: string;
    zlevel?: number;
    polyline?: boolean;
    effect?: {
      show: boolean;
      trailLength: number;
      symbol: string;
      period: number;
      symbolSize: number;
    };
  }[] = [];
let color = ["6,196,250", "228,248,51"];
keys.forEach((key, index) => {
  seriesData.push({
    name: key== 'ai'? '本学期' :"上学期",
    data: result.map((item) => {
      return item[key];
    }),
    type: "line",
    yAxisIndex: 0,
    symbol: "none",
    symbolSize: 7,
    barWidth: 14,
    splitNumber: 6,
    smooth: true,
    itemStyle: {
      color: `rgba(${color[index]},1)`,
    },
    lineStyle: {
      color: `rgba(${color[index]},1)`,
      width: 1,
    },
    areaStyle: {
      opacity: 1,
      color: {
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        type: "linear",
        global: false,
        colorStops: [
          {
            offset: 0,
            color: `rgba(${color[index]},0.9)`,
          },
          {
            offset: 0.8,
            color: "rgba(255,255,255,.1)",
          },
        ],
      },
      shadowColor: "rgba(0, 0, 0, 0.2)",
      shadowBlur: 10,
    },
  });
  seriesData.push({
    // name: key + "数",
    data: [
      {
        coords: result.map((item) => {
          return [item.name, item[key]];
        }),
      },
    ],
    type: "lines",
    coordinateSystem: "cartesian2d",
    zlevel: 1,
    polyline: true,
    smooth: true,
    symbol: "circle",
    effect: {
      show: true,
      trailLength: 0.4,
      symbol: "circle",
      period: 8,
      symbolSize: 8,
    },
    lineStyle: {
      color: `rgba(${color[index]},1)`,
      width: 0,
      opacity: 0,
      curveness: 0,
    },
  });
});

const option = reactive({
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "line",
    },
    padding: [8, 15],
    backgroundColor: "rgba(12, 51, 115,0.8)",
    borderColor: "rgba(3, 11, 44, 0.5)",
    color: "rgba(255, 255, 255, 1)",
  },
  grid: {
    show: true,
    top: "15%",
    left: "6%",
    right: "6%",
    bottom: "10%",
    containLabel: false,
    borderWidth: 0,
  },
  legend: {
    show: true,
    top: "2%",
    right: "center",
    itemWidth: 14,
    itemHeight: 2,
    itemGap: 24,
    icon: "react",
    padding: [0, 0, 0, 4],
    fontSize: 15,
    color: "#AEC6DF",
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: xData,
    axisLine: {
      lineStyle: {
        color: "#ccc",
      },
    },
    axisTick: {
      lineStyle: {
        color: "#ccc",
      },
    },
    axisLabel: {
      color: "#555",
      fontSize: 12,
    },
  },
  yAxis: [
    {
      show: true,
      nameGap: 0,
      type: "value",
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#555",
        formatter: "{value}",
        fontSize: 12,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#555",
          type: "dashed",
          opacity: 0.1,
        },
      },
      nameTextStyle: {
        fontSize: 14,
        padding: [0, 0, 0, -45],
        align: "left",
        color: "#AEC6DF;",
      },
    },
  ],
  series: seriesData,
});
</script>

<style scoped lang="scss">
.lineChart {
  height: 100%;
}
</style>
